Code Review: Why do we call it `TheHeader` instead of `Header`?

TL;DR: To comply with Vue.js default style guide

Comment on .../components/the-header/the-header.vue

-  />
+ >
+ <template #afterLogo>
+ <TheHeaderHelp />

Why do we call it TheHeader instead of Header?


This is to signal to other people that this component is a single instance component. That means that we shouldn't use more than one instance of this component. Think about it, does a site needs more than one main header? It does not.

This convention of using the The as a prefix to signal this comes from Vue's style guide. The name TheHeaderHelp follows the The prefix, not because of the "single instance" rule, but from the "tightly coupled component" rule again from Vue's style guide. It has the The prefix because it is tightly coupled to the TheHeader.